<template>
  <view class="home" v-cloak>
    <uni-nav-bar class="home-nav" @clickLeft="handleToUrl('/mainPackage/change-position')" backgroundColor="transparent" statusBar="true" :border="false">
      <view slot="left">
        <view class="nav-back">
          {{cityInfo.city?cityInfo.city.slice(0,3):'选择城市'}}
          <image src="@/static/down-white.svg" class="back-img" mode="aspectFill"></image>
        </view>
      </view>
      <view class="nav-search" @click="handleToUrl('/mainPackage/search')" :style="{'height':capsuleInfo.height+'px'}"><uni-icons type="search" style="font-size: 28rpx;line-height: 1;margin-right: 4rpx;"></uni-icons>想在哪洗牙？搜一搜</view>
    </uni-nav-bar>
    <swiper class="home-swiper" :indicator-dots="false" :autoplay="true" :interval="3000" :duration="1000">
      <swiper-item v-for="item in bannerList" :key="item.id">
        <view class="swiper-item" @click="handleBannerJump(item.url)">
          <image class="item-img" :src="item.imageUrl" mode="aspectFill"></image>
        </view>
      </swiper-item>
    </swiper>
    <view class="home-category not-bar">
      <view class="category-item" @click="handleToFamily()">
        <image src="@/static/cate-doctor.png" class="item-img" mode="aspectFill"></image>
        <view class="item-p">私人牙医</view>
      </view>
      <view class="category-item" @click="handleToHehua()">
        <image src="@/static/cate-hehua.png" class="item-img" mode="aspectFill"></image>
        <view class="item-p">荷花</view>
      </view>
      <view class="category-item" @click="handleToUrl(`/pages/other/empty?name=铭医汇`)">
        <image src="@/static/cate-mingyihui.png" class="item-img" mode="aspectFill"></image>
        <view class="item-p">铭医汇</view>
      </view>
      <view class="category-item" @click="handleToUrl(`/pages/other/empty?name=口腔百科`)">
        <image src="@/static/cate-baike.png" class="item-img" mode="aspectFill"></image>
        <view class="item-p">口腔百科</view>
      </view>
    </view>
    
    <view class="home-store" v-if="selectStore.id">
      <view class="store-header">
        <h2 class="dot" @click="handleToUrl('/mainPackage/user-evaluation')">{{selectStore.name}}</h2>
        <!-- <image src="@/static/gold.png" mode="aspectFill"></image> -->
        <span v-if="selectStore.distance" style="margin-right: 20rpx;">{{selectStore.distance}}</span>
        <view class="header-span" @click="handleToUrl('/mainPackage/change-position')">更多门店 <uni-icons color="#B0B0B0" size="14" type="right"></uni-icons> </view>
      </view>
      <view class="store-main">
        <view class="main-info">
          <view class="info-p">{{selectStore.address}}</view>
          <view class="info-tags">
            <view class="tags-item">营业中</view>
          </view>
        </view>
        <view class="main-list">
          <view class="list-item" @click="handleTimePopup()">
            <image src="@/static/time-green.png" class="item-img" mode="aspectFill"></image>
            预约
          </view>
         <view class="list-item" @click="handleCall()">
            <image src="@/static/talk-green.png" class="item-img" mode="aspectFill"></image>
            咨询
          </view>
          <view class="list-item" @click="handleOpenLocation()">
            <image src="@/static/position-green.png" class="item-img" mode="aspectFill"></image>
            导航
          </view>
        </view>
      </view>
      
      <view class="store-team" v-if="doctorList.length">
        <view class="team-header" @click="handleToUrl('/mainPackage/doctor-list')">
          <h2>医师团队（{{doctorList.length}}）</h2>
          <uni-icons type="right" size="14" color="#B0B0B0"></uni-icons>
        </view>
        <view class="team-list not-bar">
          <view class="list-item" v-for="(item,idx) in doctorList" :key="idx" @click="handleToUrl(`/mainPackage/doctor-detail?id=${item.id}`)">
            <image :src="item.avatar || '../../static/doctor-default.png'" mode="aspectFill" class="img"></image>
            <view class="item-info">
              <h3 class="h3">{{item.realName}} <span class="span">{{item.jobTitle}}</span></h3>
              <view class="item-p">从业{{item.workYear}}年</view>
              <view class="item-footer">服务 <span class="theme-color">{{item.serviceNumber}}</span><span style="font-size: 20rpx;margin:0 16rpx">|</span>好评 <span class="theme-color">{{item.goodComment}}</span></view>
            </view>
          </view>
        </view>
      </view>
    </view>
    
    <view class="home-tabs not-bar">
      <view class="tabs-item" :class="curTabs == idx?'active':''" v-for="(item,idx) in cateList" :key="idx" @click="handleChangeTabs(idx)">{{item.name}}</view>
    </view>
    
    <view class="home-goods">
      <view class="goods-list" v-if="goodsList.length">
        <view class="list-item" @click="handleToUrl(`/mainPackage/goods-detail?id=${item.id}`)" v-for="item in goodsList" :key="item.id">
          <image :src="getMedia(item.url)" mode="aspectFill" class="item-img"></image>
          <view class="item-main">
            <h2 class="dot2">{{item.title}}</h2>
            <view class="main-p dot">{{item.subTitle}}</view>
            <view class="main-footer">
              <view class="footer-price">
                <view class="price-p"><span style="font-size: 22rpx;">¥</span>{{item.price}} <span class="origin">¥{{item.originalPrice}}</span></view>
                <view class="price-span">
                  <span class="span">共省¥{{item.originalPrice - item.price}}</span>
                </view>
              </view>
              <view class="footer-handle">
                <span>已售{{item.saleNumber}}</span>
                <view class="button">抢购</view>
              </view>
            </view>
          </view>
        </view>
      </view>
      <view class="var-empty" v-else>暂无数据</view>
    </view>
    
  </view>
</template>

<script>
  import {getUrlParam,checkSalesMan} from '@/utils/Tools.js'
  import SinyuInvitation from '@/components/SinyuInvitation.vue'
  export default {
    components:{SinyuInvitation},
    data() {
      return {
        params:{
          page:1,
          pageSize:10
        },
        moreStatus:'more',
        capsuleInfo:uni.getMenuButtonBoundingClientRect() || {},
        bannerList:[],
        curTabs:0,
        cityInfo:{},
        selectStore:{},
        doctorList:[],
        cateList:[],
        popupCate:[],
        goodsList:[]
      }
    },
    onLoad(options) {
      this.$get('/news/news/advertisingPosition/selectAdvertisingListByAlias/mini_home_top').then(res=>{
        if(res.code == '1'){
          this.bannerList = res.content.advertisesList
        }
      })
      checkSalesMan(options)
      this._initData()
      uni.$off('changeStore')
      uni.$on('changeStore',e=>{
        this._initData()
      })
      uni.$off('updateLogin')
      uni.$on('updateLogin',e=>{
        this._initData()
      })
    },
    onShow() {
      this.cityInfo = uni.getStorageSync('cityInfo') || {}
    },
		onReachBottom() {
      if(this.params.total > this.goodsList.length){
        ++this.params.page;
        this._getGoodsList()
      }else{
        this.moreStatus="no-more"
      }
		},
    onShareAppMessage(res) {
      return {
        title: '牙荷',
        path: '/pages/index/index'
      }
    },
    methods: {
      handleBannerJump(url){
        if(url.includes('openmini')){
          let appId = ''
          if(process.env.TARO_ENV === 'weapp') appId = getUrlParam(url).wxAppId
          uni.navigateToMiniProgram({
            appId
          })
          return;
        }
        if(url.includes('https://')){
          url = `/pages/fineEngine/webView?url=${encodeURIComponent(url)}`
          return;
        }
        if(url.includes('pages/')){
          uni.reLaunch({
            url
          })
          return;
        }
        this.$toast('无可跳转的链接')
      },
      handleTimePopup(){
        uni.verifyLogin()
        uni.navigateTo({
          url:'/pages/family-doctor/invitation-submit'
        })
      },
      handleCall(){  // 拨打电话
        uni.makePhoneCall({
          phoneNumber:this.selectStore.mobile
        })
      },
      handleToUrl(url){  /// 跳转
        uni.navigateTo({
          url
        })
      },
      handleToFamily(){  //  私人牙医
        uni.verifyLogin()
        uni.switchTab({
          url:'/pages/family-doctor/index'
        })
      },
      handleToHehua(){
        uni.verifyLogin()
        uni.switchTab({
          url:'/pages/inclusive/index'
        })
      },
      handleChangeTabs(idx){
        this.goodsList = []
        this.curTabs = idx
        this.params.page = 1
        this._getGoodsList()
      },
      handleOpenLocation(){
        uni.openLocation({
          latitude: parseFloat(this.selectStore.latitude),
          longitude: parseFloat(this.selectStore.longitude),
          scale: 18,
          name:this.selectStore.name,
          address:this.selectStore.address,
        })
      },
      _initData(){
        this.selectStore = uni.getStorageSync('selectStore')
        this.doctorList = []
        this.cateList = []
        this.goodsList = []
        if(this.selectStore){
          this.$get('/merchant/v1/staff',{orgId:this.selectStore.id}).then(res=>{
            this.doctorList = res.content || []
          })
          this.$get(`/product/app/productReleaseAppGroup/selectProductReleaseGroup/${this.selectStore.merchantId}`).then(res=>{
            if(res.code == '1'){
              this.cateList = [{
                id:'0',
                name:'全部'
              },...res.content]
              this.popupCate = res.content
              this.goodsList = []
              this._getGoodsList()
            }
          })
        }
      },
      _getGoodsList(e){
        const data = {
          ...this.params,
          id:this.cateList[this.curTabs].id,
          merchantId:this.selectStore.merchantId,
          ...e
        }
        uni.showLoading({
          title:'加载中...'
        })
        this.$post(`/product/product/getGroupProductRelease`,data,'1').then(res=>{
          if(res.code == '1'){
            this.goodsList = [...this.goodsList,...res.content.list]
            this.params.total = res.content.pagination.totalCount
          }
        })
      }
    }
  }
</script>

<style lang="less" scoped>
  .home {
    background: var(--page-bg);
    min-height: 100vh;
    .home-nav{
      position: absolute;
      left: 0;
      top: 0;
      z-index: 1;
      color: #fff;
      .nav-back{
        display: flex;
        align-items: center;
        font-size: 28rpx;
        color: #fff;
        .back-img{
          width: 20rpx;
          height: 14rpx;
          margin-left: 6rpx;
        }
      }
      ::v-deep.uni-navbar__header-container{
        padding-left: 0;
      }
      ::v-deep.uni-navbar__header{
        align-items: center;
      }
      ::v-deep.uni-navbar-btn-text text{
        color: #fff!important;
        font-size: 28rpx!important;
        font-weight: 500!important;
      }
      .nav-search{
        background: #fff;
        display: flex;
        align-items: center;
        border-radius: 100rpx;
        padding: 0 74rpx;
        color: #6D6D6D;
      }
    }  /// home-nav  end 
    
    .home-swiper{
      height: 430rpx;
      .item-img{
        width: 100%;
        height: 430rpx;
      }
    }
    
    .home-category{
      display: flex;
      align-items: center;
      justify-content: space-evenly;
      overflow-x: auto;
      flex-wrap: nowrap;
      background: #fff;
      padding: 8rpx 0 20rpx;
      .category-item{
        font-size: 24rpx;
        color: var(--title-color);
        text-align: center;
        .item-img{
          width: 100rpx;
          height: 100rpx;
        }
      }
    }  //  home-category end
    
    .home-store{
      margin: 20rpx 0;
      padding: 26rpx 24rpx;
      background: #fff;
      .store-header{
        display: flex;
        align-items: center;
        font-size: 24rpx;
        color: var(--title-color);
        h2{
          flex: 1;
          font-size: 32rpx;
          font-weight: bold;
          margin-right: 12rpx;
        }
        image{
          width: 36rpx;
          height: 42rpx;
          margin-right: 12rpx;
        }
        .header-span{
          font-size: 24rpx;
          color: #B0B0B0;
          margin-left: auto;
        }
      }
      .store-main{
        display: flex;
        align-items: center;
        justify-content: space-between;
        .main-info{
          .info-p{
            font-size: 24rpx;
            color: #B0B0B0;
            margin: 12rpx 0;
          }
          .info-tags{
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            .tags-item{
              line-height: 1;
              padding: 8rpx;
              border-radius: 8rpx;
              color: #B0B0B0;
              font-size: 20rpx;
              background: #F6F6F6;
              margin-right: 12rpx;
            }
          }
        }
        .main-list{
          display: flex;
          align-items: center;
          .list-item{
            padding: 0 24rpx;
            position: relative;
            font-size: 20rpx;
            text-align: center;
            color: var(--title-color);
            .item-img{
              width: 52rpx;
              height: 52rpx;
              display: block;
            }
            &::after{
              display: block;
              content: '';
              position: absolute;
              right: 0;
              top: 50%;
              width: 2rpx;
              height: 58rpx;
              transform: translate(0,-25%);
              background-color: #EFEFEF;
            }
            &:last-child::after{
              display: none;
            }
          }
        }
      }  /// store-main end
      
      .store-team{
        margin-top: 24rpx;
        border-top: 2rpx solid #EFEFEF;
        .team-header{
          display: flex;
          align-items: center;
          justify-content: space-between;
          line-height: 88rpx;
          h2{
            font-size: 28rpx;
            font-weight: bold;
          }
        }
        .team-list{
          display: flex;
          align-items: center;
          flex-wrap: nowrap;
          overflow-x: auto;
          .list-item{
            margin-right: 20rpx;
            padding: 20rpx;
            border-radius: 20rpx;
            background: var(--page-bg);
            display: flex;
            align-items: center;
            .img{
              width: 114rpx;
              height: 114rpx;
              border-radius: 8rpx;
            }
            .item-info{
              flex: 1;
              margin-left: 20rpx;
              .info-icon{
                width: 32rpx;
                height: 33rpx;
                margin-left: 10rpx;
              }
            }
            .h3{
              font-size: 26rpx;
              color: var(--title-color);
              white-space: nowrap;
              font-weight: bold;
              display: flex;
              align-items: center;
              .span{
                font-size: 20rpx;
                margin-left: 8rpx;
                color: #B0B0B0;
              }
            }
            .item-p{
              font-size: 20rpx;
              margin: 10rpx 0;
              color: var(--title-color);
            }
            .item-footer{
              display: flex;
              align-items: center;
              font-size: 20rpx;
              white-space: nowrap;
              color: #6D6D6D;
              .theme-color{
                margin-left: 8rpx;
              }
            }
          }
        }
      }
    } // home-store end
    
    .home-tabs{
      display: flex;
      align-items: center;
      flex-wrap: nowrap;
      padding-left: 24rpx;
      overflow-x: auto;
      background: #fff;
      margin-top: 24rpx;
      .tabs-item{
        font-size: 28rpx;
        color: #6D6D6D;
        position: relative;
        padding: 28rpx 0;
        margin-right: 44rpx;
        white-space: nowrap;
        &::after{
          position: absolute;
          display: block;
          content: '';
          width: 34rpx;
          height: 6rpx;
          background: transparent;
          bottom: 14rpx;
          left: 50%;
          transform: translate(-50%,0);
        }
        &.active{
          font-weight: bold;
          color: var(--theme-color);
        }
        &.active::after{
          background: linear-gradient( 90deg, #29D8C6 0%, #10BEAF 100%);
        }
      }
    } /// home-tabs end
    
    .home-goods{
      background: #fff;
      .goods-list{
        padding: 0 24rpx;
        .list-item{
          display: flex;
          border-bottom: 2rpx solid #EFEFEF;
          padding: 24rpx 0;
          &:last-child{
            border-bottom: 0;
          }
          .item-img{
            width: 124rpx;
            height: 124rpx;
            margin-right: 24rpx;
            border-radius: 20rpx;
          }
          .item-main{
            flex: 1;
            h2{
              font-size: 26rpx;
              font-weight: bold;
              color: var(--title-color);
            }
            .main-p{
              margin: 8rpx 0 16rpx;
              color: #B0B0B0;
              font-size: 20rpx;
            }
            .main-footer{
              display: flex;
              justify-content: space-between;
              .footer-price{
                .price-p{
                  display: flex;
                  align-items: flex-end;
                  font-size: 28rpx;
                  font-weight: bold;
                  color: var(--sub-theme);
                  .discount{
                    background: var(--sub-theme-10);
                    color: var(--sub-theme);
                    line-height: 1;
                    padding: 4rpx;
                    border-radius: 4rpx;
                    font-weight: 400;
                    font-size: 18rpx;
                    margin: 0 8rpx;
                  }
                  .origin{
                    font-weight: 400;
                    font-size: 18rpx;
                    color: #B0B0B0;
                    text-decoration: line-through;
                    margin: 0 8rpx;
                  }
                }
                .price-span{
                  display: flex;
                  margin-top: 8rpx;
                  .span{
                    background: #fff;
                    color: var(--sub-theme);
                    line-height: 1;
                    border: 2rpx solid var(--sub-theme);
                    padding: 4rpx;
                    border-radius: 4rpx;
                    font-size: 18rpx;
                  }
                }
              }
              .footer-handle{
                text-align: right;
                font-size: 18rpx;
                color:#B0B0B0;
                .button{
                  background: var(--theme-color);
                  color: #fff;
                  font-size: 24rpx;
                  line-height: 1;
                  padding: 12rpx 24rpx;
                  border-radius: 88rpx;
                  margin-top: 4rpx;
                }
              }
            }
          }
        }
      }
    } /// home-goods end
    
  }
</style>